<!doctype html>
<html>

<head>
	<title>Line Chart</title>
	<script src="http://www.chartjs.org/dist/2.7.2/Chart.bundle.js"></script>
	<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<style>
	canvas{
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<div style="width:75%;">
		<canvas id="canvas"></canvas>
	</div>
	<br>
	<br>
	<div class="slidecontainer">
  		<input type="range" min="2" max="20" value="5" class="slider" id="myRange" onchange="lambdachange(this.value)">
	</div>
	<button id="sw" onclick="switchfunc()">Switch</button>
<!-- 	<button id="addDataset">Add Dataset</button>
	<button id="removeDataset">Remove Dataset</button>
	<button id="addData">Add Data</button>
	<button id="removeData">Remove Data</button> -->
	<script>
		// var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

		function lambdachange(la){
			lambda = la * 0.1
			$.post("/ua/lambda",{lambda:la},function(data, status, hr){
				console.log(data)
			})
		}

		function switchfunc() {
			$.get("/ua/switch", function(result){
				console.log(result)
			})
		}

		var config = {
			type: 'line',
			data: {
				labels: ['0', '1', '2', '3', '4', '5', '6','7','8','9'],
				datasets: [{
					label: 'Sequential Update',
					backgroundColor: window.chartColors.red,
					borderColor: window.chartColors.red,
					data: [
						0,
						0,
						0,
						0,
						0,
						0,
						0,
						0,
						0,
						0
					],
					fill: false,
				}, {
					label: 'UA Update',
					fill: false,
					backgroundColor: window.chartColors.blue,
					borderColor: window.chartColors.blue,
					data: [
						0,
						0,
						0,
						0,
						0,
						0,
						0,
						0,
						0,
						0
					],
				}]
			},
			options: {
				animation: {
            		duration: 0, // general animation time
        		},
				responsive: true,
				title: {
					display: false,
					text: ''
				},
				tooltips: {
					mode: 'index',
					intersect: false,
				},
				hover: {
					mode: 'nearest',
					intersect: false
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Time'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							display: true,
							labelString: 'Update Cost Time'
						},
						ticks: {
							max: 10,
							beginAtZero: true
						}
					}]
				}
			}
		};

		var data1 = [0,0,0,0,0,0,0,0,0,0];
		var data2 = [0,0,0,0,0,0,0,0,0,0];

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myLine = new Chart(ctx, config);
		};

		var lambda = 0.5;

		function loop(){
			// var range = document.getElementById("myRange")
			// console.log(range.value)
			// lambda = range.value*0.0001;
			// console.log(lambda)
			// data1.shift()
			// data1.push((Math.random()* 0.25 + 0.85)+lambda*100)
			// data1.shift()
			// data1.push(null)

			// data2.shift()
			// data2.push((Math.random()* 0.25 + 0.85)+lambda*1000)
			
			// config.data.datasets[0].data = data2;
			// config.data.datasets[1].data = data1;
			// console.log(data1)
			// console.log(data2)
			// window.myLine.update();
			// console.log("timeout");
			// window.setTimeout(loop,1/lambda);
			$.post("/ua/data","10",function(result){
				window.setTimeout(loop,500);
				result=JSON.parse(result)
				console.log(result);
				if(result.length<10){
					console.log("result.length<10")
					return;
				}
				seq=[]
				ua=[]
				for(i=0;i<10;i++){
					a=result[i]
					console.log(a)
					if(a.type=="seq"){
						seq.push(a.value)
						ua.push(null)
					} else if(a.type=="ua"){
						seq.push(null)
						ua.push(a.value)
					}
				}
				config.data.datasets[0].data = seq;
				config.data.datasets[1].data = ua;
				console.log(seq)
				console.log(ua)
				window.myLine.update();
				
			})
		}

		window.setTimeout(loop,500);

		
	</script>
</body>

</html>
